<template>
  <div class="user-info-container">
    <div class="form-wrapper">
      <!-- 左侧头像上传 -->
      <div class="avatar-section">
        <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <div class="user-id">用户ID: {{ form.user_id }}</div>
      </div>

      <!-- 右侧表单 -->
      <el-form
          :model="form"
          label-width="100px"
          :rules="rules"
          class="info-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" clearable />
            </el-form-item>

            <el-form-item label="真实姓名" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="form.gender">
                <el-radio label="0">女</el-radio>
                <el-radio label="1">男</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="出生日期" prop="birth">
              <el-date-picker
                  v-model="form.birth"
                  type="date"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" />
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" type="email" />
            </el-form-item>

            <el-form-item label="所在城市" prop="location">
              <el-input v-model="form.location" />
            </el-form-item>

            <el-form-item label="账户状态" prop="status">
              <el-select v-model="form.status">
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="form-actions">
          <el-button type="primary" @click="submitForm">保存修改</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref({
  user_id: 1001,
  username: '阿三',
  password: '123456',
  name: '张三',
  gender: '0',
  birth: '2000-02-22',
  phone: '15677386642',
  email: 'lucy@163.com',
  avatar: '/imgs/touxiang.png',
  location: '山西省太原市万柏林区公园路1号',
  status: '1',
  registration: '2024-01-01 00:00:00',
  modified: '2024-01-01 00:00:00',
  login_time: '2024-01-01 00:00:00'
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ]
}

const handleAvatarSuccess = (response) => {
  form.value.avatar = URL.createObjectURL(response.raw)
}

const submitForm = () => {
  // 这里添加保存逻辑
  ElMessage.success('信息保存成功')
  console.log('保存的数据:', form.value)
}

const resetForm = () => {
  ElMessage.info('已重置为原始数据')
  // 实际应用应从服务器重新获取数据
}
</script>

<style scoped>
.user-info-container {
  padding: 40px;
  background: #f5f7fa;
  min-height: 100vh;
}

.form-wrapper {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 30px;
  display: flex;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.avatar-section {
  flex: 0 0 200px;
  text-align: center;
}

.avatar-uploader {
  border: 2px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-id {
  color: #666;
  font-size: 14px;
}

.info-form {
  flex: 1;
}

.form-actions {
  margin-top: 30px;
  text-align: right;
}

.el-form-item {
  margin-bottom: 22px;
}
</style>
